import React from 'react';
import {
	ScrollView,
	RefreshControl,
	StyleSheet,
	Text,
	SafeAreaView
} from 'react-native';

const wait = (timeout) => {
	return new Promise(resolve => {
		setTimeout(resolve, timeout);
	});
};
const styles = StyleSheet.create({
	container: {
		flex: 1
	},
	scrollView: {
		flex: 1,
		backgroundColor: 'pink',
		alignItems: 'center',
		justifyContent: 'center'
	}
});
const RefreshControlPage = () => {
	const [refreshing, setRefreshing] = React.useState(false);

	const onRefresh = React.useCallback(() => {
		setRefreshing(true);

		wait(2000).then(() => setRefreshing(false));
	}, []);

	return (
		<SafeAreaView style={styles.container}>
			<ScrollView
    contentContainerStyle={styles.scrollView}
    refreshControl={
					<RefreshControl onRefresh={onRefresh}
    refreshing={refreshing}
					/>
				}
			>
				<Text>Pull down to see RefreshControl indicator</Text>
			</ScrollView>
		</SafeAreaView>
	);
};



export default RefreshControlPage;
